<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import useService from './service'
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { SettlementPriceManager } from './types'

  const props = defineProps({
    factoryId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'loading-change', value: boolean): void
  }>()

  // 使用服务
  const { get, total } = useService

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  // 列表
  const tableData = ref<Array<SettlementPriceManager>>([])

  // 获取filter
  const getFilter = () => {
    const result = {
      limit: 50,
      page: 1,
    }

    if (paginationRef.value) {
      result.limit = paginationRef.value.size
      result.page = paginationRef.value.current
    }

    return result
  }

  // 获取列表方法
  const getList = async () => {
    emits('loading-change', true)
    try {
      tableData.value = await get(getFilter(), props.factoryId)
    } catch (error) {
      ElMessage({
        type: 'error',
        showClose: true,
        message: error,
      })
    }
    emits('loading-change', false)
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div class="settlement_price_manager">
    <el-table :border="true" stripe resizable :data="tableData" style="width: 100%" height="100%">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <!--序号-->
      <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" width="50" />

      <!--模块名称-->
      <el-table-column show-overflow-tooltip prop="module" label="模块名称" />

      <!--模块费用-->
      <el-table-column show-overflow-tooltip prop="modulePrice" label="模块费用" />

      <!--结算价-->
      <el-table-column show-overflow-tooltip prop="price" label="结算价" />

      <!--模块类型-->
      <el-table-column show-overflow-tooltip prop="type" label="模块类型" />

      <!--是否全包-->
      <el-table-column show-overflow-tooltip prop="type" label="是否全包">
        <template #default="scope">
          <div>
            <el-tag v-if="scope.row.allInclusiveFee">全包</el-tag>
            <el-tag v-else type="info">不包</el-tag>
          </div>
        </template>
      </el-table-column>

      <!--创建时间-->
      <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" />

      <!--更新时间-->
      <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" />
    </el-table>

    <!--分页-->
    <div class="settlement_price_manager_pagination">
      <Pagination
        ref="paginationRef"
        :list_total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .settlement_price_manager {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .settlement_price_manager_pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
